<div class="x-upload-portal {{ cutType }}" [class.x-upload-portal-ready]="ready">
  <div class="x-upload-portal-tools">
    <div class="x-upload-portal-title">
      <x-icon type="fto-image"></x-icon>
      <span>{{ file?.name }}</span>
    </div>
    <x-icon class="x-upload-portal-close" type="fto-x" (click)="closePortal()"></x-icon>
  </div>
  <div class="x-upload-portal-img">
    <img #imgRef class="x-upload-portal-full-img" [src]="file.url" />
    <div #boundaryRef class="x-upload-portal-boundary">
      <img #imgClipRef class="x-upload-portal-clip-img" [src]="file.url" />
      <div #cutRef class="x-upload-portal-cut">
        <div class="x-upload-portal-cut-top-start"></div>
        <div class="x-upload-portal-cut-top"></div>
        <div class="x-upload-portal-cut-top-end"></div>
        <div class="x-upload-portal-cut-left"></div>
        <div class="x-upload-portal-cut-right"></div>
        <div class="x-upload-portal-cut-bottom-start"></div>
        <div class="x-upload-portal-cut-bottom"></div>
        <div class="x-upload-portal-cut-bottom-end"></div>
      </div>
    </div>
  </div>
  <div class="x-upload-portal-bottom-tools">
    <x-icon class="x-upload-portal-close" type="fto-check" (click)="sure()"></x-icon>
  </div>
</div>
